<template>
  <div>
<el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark">
    <h2>森林病虫害防治系统</h2>
    </div></el-col>
  </el-row>
    <img id="a" :src="img">
    <!-- <img src="/assets/logo.jpg" alt="对不起，找不到该图片" > -->
  
    <el-form>
    用户名    <input type="text" v-model="username"><br>
    密码    <input type="password" v-model="pwd"><br>
    <input type="button"  value="登录" @click="login()" ><br>
  </el-form>
  </div>
</template>

<script>
import {mapMutations} from "vuex";
export default {
    data(){
        return{
            img : require('../img/1.jpg'),
            username:"",
            pwd:"",
        }
    },
    methods:{
        ...mapMutations(["setLoginer"]),
        async login(){
           if (this.username == "" || this.pwd == "") {
                alert("用户名或密码不能为空");
                return;
            }
            let paramObj = {username:this.username,pwd:this.pwd}
            let info = await this.ajax.getSubmit("/api/user/login",paramObj)
            console.log(info)
            this.setLoginer(info)
            if(info != ""){
              if(info.power == "资料管理员"){
                this.$router.push("/data/blight")
              }
              if(info.power == "灾情管理员"){
                this.$router.push("/disaster/area")
              }
              if(info.power == "专家管理员"){
                this.$router.push("/expert/expertInfo")
              }
              if(info.power == "库房管理员"){
                this.$router.push("/out/goods")
              }
              if(info.power == "超级管理员"){
                this.$router.push("/user/usermanage")
              }
            }else{
              alert("用户名或密码错误")
            }
        }
    }
}
</script>

<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  h2 {
    margin: 0 590px;
  }
  #a {
    margin: 0 516px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  
</style>